<template>
    <div>
        <div style="height:40px;line-height:40px;background-color:#cdcdcd;width:100%;text-align:center;font-size:18px;font-family:'微软雅黑'">秦皇岛金融机构分布图</div>
        <RemoteJS src="https://api.map.baidu.com/api?v=2.0&ak=s0WXyAMDZRCfMPUoRKqv6d0o0Tivg7Rn&s=1" name="BMap" @on-loaded="handleLoaded"></RemoteJS>
        <div id="allmap" style="width:100%;height:500px;"></div>
    </div>
</template>

<script>
    import RemoteJS from '@/common/components/RemoteJS';
    import Member from '@/common/model/Member'

    export default {
        props: {
            data: Array
        },
        data () {
            return {
                 
            }
        },
        components: {
            RemoteJS
        },
        computed: {
            list() {
                return Member.parseList(this.data);
            }
        },
        methods: {
            handleLoaded(BMap) {
                var that = this;
                var map;
                var noinfo = "没有数据";
                function initMap() {
                    createMap(); //创建地图
                    setMapEvent(); //设置地图事件
                    addMapControl(); //向地图添加控件
                    addMapOverlay(); //向地图添加覆盖物
                }
                
                function createMap() {
                    map = new BMap.Map("allmap");
                    map.centerAndZoom(new BMap.Point(119.604, 39.945), 13);
                }
                function setMapEvent() {
                    //map.enableScrollWheelZoom();
                    map.enableKeyboard();
                    map.enableDragging();
                    map.enableDoubleClickZoom()
                }
                // 编写自定义函数,创建标注
                function addMarker(point){
                    var marker = new BMap.Marker(point);
                    map.addOverlay(marker);
                }
                function addClickHandler(target, window) {
                    target.addEventListener("click", function () {
                        target.openInfoWindow(window);
                    });
                }
                function addMapOverlay() {
                    //处理地图中的数据
                    var temp_data = that.list;
                    var markers = [];
                    for(var i = 0; i < temp_data.length; i++)
                    {
                        var temp = temp_data[i];
                        markers.push({
                            id: temp.id,
                            title: temp.enterprise_name,
                            content: temp.enterprise_profile,
                            imageOffset: { width: -46, height: -21 },
                            position: { lat: temp.coordinate[1], lng: temp.coordinate[0] }
                        });
                    };
                    for (var index = 0; index < markers.length; index++) {
                        var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
                        var marker = new BMap.Marker(point, { icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
                            imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
                        })
                        });
                        var label = new BMap.Label(markers[index].title, { offset: new BMap.Size(25, 5) });
                        var opts = {
                            width: 200,
                            title: markers[index].title,
                            enableMessage: true
                        };
                        if (markers[index].content == null) {
                            markers[index].content = noinfo;
                        }
                        var info_window_content = `
                            <a href="/#/index/personal_exhibition/${markers[index].id}">${markers[index].title}</a>
                            <div>${markers[index].content}</div>
                        `;
                        var infoWindow = new BMap.InfoWindow(info_window_content, /*opts*/);
                        marker.setLabel(label);
                        addClickHandler(marker, infoWindow);
                        map.addOverlay(marker);
                    };
                }
                //向地图添加控件
                function addMapControl() {
                    var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
                    scaleControl.setUnit(BMAP_UNIT_METRIC);
                    map.addControl(scaleControl);
                    var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: 0 });
                    map.addControl(navControl);
                    var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true });
                    map.addControl(overviewControl);
                }
                initMap();
            }
        }
    }
</script>
<style scoped>
</style>